<template>
  <div>
    <div>
      <el-table :data="data" stripe :height="props.height" :border="props.border">
        <el-table-column prop="index" width="55" label="序号">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label"
          :width="column?.width" :min-width="column?.minWidth" :fixed="column.fixed" :sortable="column.sortable" :align="props.align">
          <template #default="scope" v-if="!column?.children">
            <div>
              <el-date-picker style="height: 26px;"
                v-if="scope.row[column.prop]?.showElement == 'date' && scope.row[column.prop]?.status"
                v-model="scope.row[column.prop].value" type="date" placeholder="请选择日期" />
              <el-input style="height: 26px;"
                v-if="scope.row[column.prop]?.showElement == 'input' && scope.row[column.prop].status"
                v-model="scope.row[column.prop].value" />

              <el-tooltip v-if="!scope.row[column.prop]?.status" popper-class="content_gscx_tooltip" effect="dark"
                :content="scope.row[column.prop]?.showElement ==
                  'date' ? setForm(scope.row[column.prop]?.value || '') : scope.row[column.prop]?.value ||
                scope.row[column.prop]" placement="top-start">
                <span class="content_gscx_table">
                  {{ scope.row[column.prop]?.showElement ==
                    'date' ? setForm(scope.row[column.prop]?.value || '') : scope.row[column.prop]?.value ||
                     scope.row[column.prop]
                  }}
                </span>
              </el-tooltip>
            </div>
          </template>
          <template #default="scope" v-if="column?.slotName == 'operator'">
            <slot :name="column.slotName" :row="scope.row">
              {{ scope.row[column.prop] }}
            </slot>
          </template>
          <template #default="scope" v-if="column?.slotName == 'operatorName'">
            <slot :name="column.slotName" :row="scope.row">
              {{ scope.row[column.prop] }}
            </slot>
          </template>
          <template #default="scope" v-if="column?.slotName == 'operatorStatus'">
            <slot :name="column.slotName" :row="scope.row">
              {{ scope.row[column.prop] }}
            </slot>
          </template>
        </el-table-column>
      </el-table>
     
    </div>
  </div>
</template>

<script setup>
import { setForm } from "@/plugin/date"
import { ref } from 'vue'
const nameVale = ref('')
const props = defineProps({
  //设置表格高度
  height: {
    default: 'auto',
  },
  data: {
  },
  // 存在的列
  columns: {
    type: Array,
    required: true,
  },

  showIndexColumn: {
    type: Boolean,
    default: false,
  },
  //控制是否显示分页，默认是显示
  isPagination: {
    type: Boolean,
    default: true
  },
  //是否显示边框
  border: {
    type: Boolean,
    default: true
  },

  //设置内容分的展示位置
  align: {
    type: String,
    default: 'left'
  },
  //查询表格内的字段
  selectkeyList: {
    type: Array,
    default: []
  },
  //是否显示查询输入框数据
  // isShowInput: {
  //   type: Boolean,
  //   default: false
  // }
})
// const datas = ref(JSON.parse(JSON.stringify(props.data)))
const datasArray = ref(JSON.parse(JSON.stringify(props.data)))

//查询表格数据
const getSearchTable = () => {
  if (datasArray.value.length == 0 || !datasArray.value) {
    return
  }
  let array = []
  datasArray.value.forEach(item => {
    props.selectkeyList.forEach(item2 => {
      if (item[item2].toString().includes(nameVale.value)) {
        array.push(item)
      }
      if (Object.keys(item[item2]).includes('showElement') || Object.keys(item[item2]).includes('status')) {
        if (item[item2].value.toString().includes(nameVale.value)) {
          array.push(item)
        }
      }


    })
  })
  return array
}
</script>

<style scoped>
.marginTop {
  margin-top: 20px;

}

.marButton {
  margin-bottom: 15px;
}

.titleLabel {
  color: #606266;
}

.content_gscx_table {
  max-width: 150px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

